<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/icons-extra.css">
		<link rel="stylesheet" href="css/iconfont.css">
		<style>
			body{background:#fff;}
			.mui-bar-nav{
				width:90%;
				margin: 0 auto;
				box-shadow:none;
			}
			.mui-bar-tab a.mui-active{
				color:#9fa41c!important;
			}
			.mui-bar-tab{
				z-index: -1;
				border-top:1px solid #ddd!important;
				box-shadow:none;
			}
			.mui-icon-none:before{
				content:none;
			}
			.iconfont{
				font-size: 24px;
			}
			.icon-zidian{
				font-size: 20px;
				padding:2px 2px;
			}
		</style>
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab" id="mui-tab-bottom">
			    <a id="defaultTab" class="mui-tab-item mui-active" href="pages/index.html">
			        <span class="mui-icon mui-icon-home-filled"></span>
			        <span class="mui-tab-label">首页</span>
			    </a>
			    <a class="mui-tab-item mui-tab-zazhi" href="pages/zazhi.html">
			        <span class="mui-icon mui-icon-none"><i class="iconfont icon-zidian"></i></span>
			        <span class="mui-tab-label">杂志</span>
			    </a>
			    <a class="mui-tab-item" href="pages/huodong.html">
			        <span class="mui-icon mui-icon-none"><i class="iconfont icon-huodong3"></i></span>
			        <span class="mui-tab-label">活动</span>
			    </a>
			    <a class="mui-tab-item" href="pages/goods.html">
			        <span class="mui-icon mui-icon-none"><i class="iconfont icon-icon1"></i></span>
			        <span class="mui-tab-label">商城</span>
			    </a>
			    <a class="mui-tab-item" href="pages/home.html" id="mui-tab-setting">
			        <span class="mui-icon mui-icon-contact"></span>
			        <span class="mui-tab-label">我的</span>
			    </a>
		</nav>
		
		<script src="js/mui.min.js"></script>
		<script src="js/castapp.js"></script>
		<script src="js/myapp.js"></script>
		<script src="js/castapp.js" ></script>
	</body>
</html>

<script>
	ca.init();
	
	//接收通知消息    
	ca.receiveNotice('look_all',function(event){
		//ca.className('mui-tab-zazhi').onClick();
	});
</script>
<script>
mui.init();
	//创建子页面 
var subpages = ['pages/index.html','pages/zazhi.html','pages/huodong.html','pages/goods.html','pages/home.html'];
var subpage_style = {
    top: '0px',
    bottom: '50px',
    scrollIndicator: "none" ,// 当你的界面的内容足够多的时候，会出现滚动条，这个是隐藏滚动条
};
var mypages = new Array();
//创建子页面，首个选项卡页面显示，其它均隐藏
mui.plusReady(function(){
	var uuid = plus.device.uuid; 
	init_token(uuid);
	//检测是否第一次启动app
	showGuide();
	 //设置bottom绝对位置 
    document.getElementById('mui-tab-bottom').style.top = (plus.display.resolutionHeight - 50) + "px";
	//获得当前页面
    var self = plus.webview.currentWebview();
    //循环创建子页面
    for(var i=0;i<subpages.length;i++){
        var sub = plus.webview.create(subpages[i],subpages[i],subpage_style);
        mypages[i] = 0;
        if(i>0){
            sub.hide();
        }
        self.append(sub);
    }
});
             
             
//当前激活选项卡 
var activeTab = subpages[0];
             
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
    var targetTab = this.getAttribute('href');
    if (targetTab == activeTab) {
            return;
    }
    //循环创建子页面 
    for(keys in subpages){
        //console.log(subpages[keys]);
        if(subpages[keys] == targetTab){
        	mypages[keys] = mypages[keys] + 1;
        	//首先获得目标页面的对象
			var targetPage = plus.webview.getWebviewById(subpages[keys]); 
			
			mui.fire(targetPage,'shijian',{
			  //自定义事件参数
			  isLoading:mypages[keys]
			});
        	console.log(subpages[keys] + '----' + mypages[keys]);
        }
    }
    //mui.toast(this.index);
    //console.log(e.index);
    //var h = plus.webview.getWebviewById('pages/huodong.html');
    //console.log(h.getElementById('mui-huodong'));
    //显示目标选项卡
    plus.webview.show(targetTab, 'zoom-fade-out', 300);
    //隐藏当前;
    plus.webview.hide(activeTab);
    //更改当前活跃的选项卡
    activeTab = targetTab;
});
             
//自定义事件，模拟点击“首页选项卡”
document.addEventListener('gohome',function () {
    var defaultTab = document.getElementById("defaultTab");
    //模拟首页点击
    mui.trigger(defaultTab,'tap');
    //切换选项卡高亮
    var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
    if(defaultTab!==current){
        current.classList.remove('mui-active');
        defaultTab.classList.add('mui-active');
    }
});
function showGuide(){
	//plus.storage.removeItem("lauchFlag");
	
	//读取本地存储，检查是否为首次启动
	var showGuide = plus.storage.getItem("lauchFlag");
	if(showGuide){
		//有值，说明已经显示过了，无需显示；
		//关闭splash页面；
		plus.navigator.closeSplashscreen();
		plus.navigator.setFullscreen(false);
		//初始化模板
		//initTemplates(); 
		//预加载
		//preload();
	}else{
		//显示启动导航
		mui.openWindow({
			id:'guide',
			url:'pages/guide.html',
			show:{
				aniShow:'none'
			},
			waiting:{
				autoShow:false
			}
		});
		//延迟的原因：优先打开启动导航页面，避免资源争夺
		setTimeout(function () {
			//初始化模板
			//initTemplates(); 
			//预加载
			//preload();
		},200);
	}
}
</script>